<template>
    <div>
        <el-table
        stripe
        :data="list"
        style="width: 100%">
            <el-table-column
                prop="id"
                label="ID">
            </el-table-column>
            <el-table-column
                label="用户id">
                <template slot-scope="scope">
                    <userInfo :data="scope.row"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题">
            </el-table-column>
            <el-table-column
                label="结果">
                <template slot-scope="scope">
                    <el-tag
                    :type="color[scope.row.result]">
                        {{ msg[scope.row.result] }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="难度">
                <template slot-scope="scope">
                    <el-rate
                        v-if="$ispc"
                        v-model="scope.row.level"
                        disabled
                        >
                    </el-rate>
                    <span v-else>{{ scope.row.level }}</span>
                </template>
            </el-table-column>
            <el-table-column
            prop="type"
                label="语言">
            </el-table-column>
            <el-table-column
                width="80px"
                min-width="20%"
                style="min-width: 20%;"
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                    <div>
                        <el-button
                        :size="$size"
                        @click="showDetail(scope.row)">详情</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <topicPreview :topic="pre.topic" :answerItem="pre.answerItem" :drawer="drawer" 
        @handleClose="drawer = false" />
    </div>
</template>

<script>
import { getAnswerItemDetail } from '@/api/answerItem'
import topicPreview from '@/components/topic/topicPreview.vue'
import userInfo from '@/components/user/userInfo.vue'
export default {
    props : ['list'],
    components : {
        topicPreview,
        userInfo
    },
    data(){
        return {
            drawer : false,
            pre : {
                topic : {},
                answerItem : {}
            },
            color : ['danger', 'success', ''],
            msg : ['错误', '正确', ''],
        }
    },
    methods : {
        showDetail({ id }){
            getAnswerItemDetail(id).then(res => {
                if (res.code == 200) {
                    this.pre = res.data
                    this.drawer = true
                }
            })
        }
    }
}
</script>

<style>

</style>